<html>
<head>
<title>奥特Man</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="css/images/auto-man.ico">
<script type="text/javascript" src="js/jquery.js" /></script>

<script type="text/javascript">
	function test() {
		var reg = new RegExp($("#reg").val());
		var result = reg.test($("#text").val());
		$("#result").html("" + result);

	}

	var result = ""
	function xxx() {
		result = "<html><head><style>";
		showEle($("#ttt"), $('#far'));
		result = result + "</style><body>" + $('#far').html() + "</body></html>"
		$("#result").text(result);
		console.log($('#far').html());
	}
	
	var cssIndex = 0;
	function showEle(ele, root){
		var d = ele[0];
		//console.log(d.tagName);
		var temp = $('<' + d.tagName + '>');
		temp.appendTo(root);
		var z =getComputedStyle(d);
		var zt = getComputedStyle(temp[0]);
		var cssName = d.tagName + (cssIndex++);
		temp.addClass(cssName);
		result = result + "\n" + "." + cssName + "{";
		console.log("." + cssName + "{")
		for(var i=0; i<z.length; ++i){
			var a = z[i];
			if(z[a] !== zt[a]){
				console.log(a + ":" + z[a]);
				result = result + "\n" + a + ":" + z[a] +";";
			}
		}
		console.log("}")
		result = result + "\n" + a + "}";
		root = temp;
		var c = ele.children();
		for(var j=0; j<c.length; ++j){
			showEle($(c[j]), temp);
		}
	}

	$(function() {
		var sb = $('#tests').wrap("<div class='searchbox'></div>");
		$('#tests').addClass("search");
		$('#tests').after("<input class='dosearch' type='button' />");
	});
</script>
<style type="text/css">
.searchbox {
	background-color: rgb(255, 255, 255);
	background-image: none;
	background-size: auto;
	border: 1px solid  rgb(229, 229, 229);
	float: left;
	
	height: 13px;
	padding-bottom: 16.953125px;
	padding-left: 0px;
	padding-right: 3px;
	padding-top: 3.03125px;
	width: 300px;
}

.search {
	background-color: rgb(255, 255, 255);
	border:0 rgb(0,0,0) none;
	color: rgb(0, 0, 0);
	cursor: auto;
	display: block;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 16px;
	height: 20px;
	letter-spacing: normal;
	line-height: 20px;
	margin-bottom: -16px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: rgb(0, 0, 0);
	outline-style: none;
	outline-width: 0px;
	padding-bottom: 4.953125px;
	padding-left: 9px;
	padding-right: 5px;
	padding-top: 4px;
	text-align: start;
	text-indent: 0px;
	text-shadow: none;
	text-transform: none;
	width: 259px;
	word-spacing: 0px;
	writing-mode: lr-tb;
}

.dosearch {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgba(0, 0, 0, 0);
	background-image: url(css/images/add-file.gif);
	background-origin: padding-box;
	background-position: -31px -108px;
	background-size: auto;
	border:0 rgb(0,0,0) none;
	box-sizing: border-box;
	color: rgb(0, 0, 0);
	cursor: pointer;
	display: block;
	float: left;
	font-family: Arial;
	font-size: 0px;
	height: 27px;
	letter-spacing: normal;
	line-height: 0px;
	margin-bottom: -14px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline: 0 rgb(0,0,0) none;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-bottom: 0px;
	padding-left: 9px;
	padding-right: 5px;
	padding-top: 0px;
	text-align: center;
	text-indent: 0px;
	text-shadow: none;
	text-transform: none;
	white-space: pre;
	width: 27px;
	word-spacing: 0px;
	writing-mode: lr-tb;
}




.searchbox1 {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgb(255, 255, 255);
	background-image: none;
	background-origin: padding-box;
	background-size: auto;
	border: 1px solid  rgb(229, 229, 229);
	display: block;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 16px;
	height: 13px;
	padding-bottom: 16.953125px;
	padding-left: 0px;
	padding-right: 3px;
	padding-top: 3.03125px;
	width: 300px;
}

.search1 {
	background-color: rgb(255, 255, 255);
	
	border:0 rgb(0,0,0) none;
	color: rgb(0, 0, 0);
	cursor: auto;
	display: block;
	float: left;
	font-family: Arial;
	font-size: 16px;
	height: 20px;
	letter-spacing: normal;
	line-height: 20px;
	margin-bottom: -16px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: rgb(0, 0, 0);
	outline-style: none;
	outline-width: 0px;
	padding-bottom: 4.953125px;
	padding-left: 9px;
	padding-right: 5px;
	padding-top: 4px;
	text-align: start;
	text-indent: 0px;
	text-shadow: none;
	text-transform: none;
	width: 259px;
	word-spacing: 0px;
	writing-mode: lr-tb;
}

.dosearch1 {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgba(0, 0, 0, 0);
	background-image: url(css/images/hpc5.png);
	background-origin: padding-box;
	background-position: -31px -108px;
	background-size: auto;
	border:0 rgb(0,0,0) none;
	box-sizing: border-box;
	color: rgb(0, 0, 0);
	cursor: pointer;
	display: block;
	float: left;
	font-family: Arial;
	font-size: 0px;
	height: 27px;
	letter-spacing: normal;
	line-height: 0px;
	margin-bottom: -14px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: rgb(0, 0, 0);
	outline-style: none;
	outline-width: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-bottom: 0px;
	padding-left: 9px;
	padding-right: 5px;
	padding-top: 0px;
	text-align: center;
	text-indent: 0px;
	text-shadow: none;
	text-transform: none;
	white-space: pre;
	width: 27px;
	word-spacing: 0px;
	writing-mode: lr-tb;
}
</style>
</head>
<body>
	<label>正则</label>
	<input type="text" name="reg" id="reg">
	<label>文本</label>
	<input type="text" name="text" id="text">
	<input type="button" onclick="test()" value="测试">
	<div id="result"></div>
	<form id="test" action="http://192.168.11.11" method="post">
		<input type="text" name="a"> <input type="text" name="b">
		<input type="checkbox" name="c" value="xx"> <input
			type="button" value="测试" onclick="xxx()"> <input
			type="submit" value="提交">
	</form>


	<div class="searchbox1" id='ttt'>
		<input class="search1" type="text" /> <input class="dosearch1"
			type="button" onclick="void(0);" />
	</div>
	<div style="clear: both;"></div>
	<input id="tests" type="text" />
	<div id="result"></div>
	<div id="far"></div>
</body>
</html>